<template>
  <div
    id="app"
  >
    <div class="hea">
      电子健康卡系统
      <div class="healeft">
        管理员
        <el-button type="text" icon="el-icon-switch-button" @click="exit()">退出</el-button>
      </div>
    </div>
    <div class="b" style="overflow-y: auto;">
      <div id="left">
        <el-menu
          router
          :default-active="$route.path"
          background-color="#545c64"
          text-color="#FFFFCC"
          active-text-color="#66CCCC"
          @select="MenuActive"
        >
          <el-menu-item index="/">
            <i class="el-icon-bell"></i>
            <span slot="title">数据监测</span>
          </el-menu-item>

          <el-menu-item index="/healthlist">
            <i class="el-icon-menu"></i>
            <span slot="title">健康卡管理</span>
          </el-menu-item>
         <el-menu-item index="/hospitaldata">
            <i class="el-icon-s-grid"></i>
            <span slot="title">各医院数据</span>
          </el-menu-item>
        </el-menu>
      </div>
      <router-view  v-if="isShow"/>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: "",
      isShow: true,
    };
  },
  provide(){
   return {
     reload: this.reload
   }
  },
  beforeCreate() {
   
  },
  beforeMount() {},
 
  mounted() {
     const token =this.$store.state.token
    
    if (!token) {
      this.$router.push("/");
    }
  },
  methods: {
   //重新加载组件
 reload(){
this.isShow=false;
this.$nextTick(function(){
  this.isShow=true
})
 },

    MenuActive(index) {
      // console.log(index)
      this.index = index;
      // this.$store.commit("menu", index);
    },
    exit() {
      this.$confirm("确定要退出该系统吗？", "提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.commit("exit", "");
          this.$router.replace("/");
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
#app {
  background: none;
  flex-direction: column;
  font-size: 16px !important;
}
.hea {
  height: 50px;
  line-height: 30px;
  background-color: #333333;
  color: #fff;
  padding: 10px 20px;
  box-shadow: 0 5px 10px #ccffff;
  font-size: 16px;
}
.healeft {
  float: right;
}
.b {
  flex: 1;
  display: flex;
}
</style>